<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件源[4类 15种]</title>
		<!-- 
		 一： 鼠标事件
			①click()  元素单机
			②dblclick() 双击
			③mouseenter()   鼠标移入 触发效率低
			④mouseleave() 当鼠标移出 触发效率低
			⑤mousemove() 当鼠标指针在元素内移动触发效果 触发效率高
		 二：键盘事件
		 三：表单事件
		 ①focus() 针对input 当元素获取焦点时候触发
		 ②blur() 针对 input元素 当元素失去焦点时触发
		四：窗口/文档事件
		 -->
		 <style>
			 /* 200*200 居中垂直显示， 外边框四边颜色不同 */
			 div{
				 width: 200px;
				 height: 200px;
				 text-align: center;
				 line-height: 200px;
				 border-top: 50px solid  #ffaaff;
				 border-right: 50px solid #00aaff;
				 border-bottom: 50px solid #aaff00;
				 border-left: 50px solid #55ff7f;
				 background-color: #00aaff;
			 }
		 </style>
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>鼠标触发事件</h1>
		<button class="btn1">鼠标单机</button>
		<button id="btn2">鼠标双击</button>
		<div><span>鼠标移入和移除</span></div>
		<input type="text" name="" id="">
		<script>
			// 鼠标单机
			// $('.btn1').click(function(){
			// 	alert('王克邹忌马季奇')
			// 	document.write('<marquee>跑马灯...</marquee>');
			// });
			// $('#btn2').dblclick(function(){
				
			// });
			// $('div').mouseenter(function(){
			// 	alert('鼠标移入了');
			// });
			// $('div span').mouseleave(function(){
			// 	alert('王克洲际马嘉祺');
			// 	document.write('<h1> 鼠标移除了</h1>');
			// });
			// 鼠标跟随 移动鼠标选区位置：绘画 页面位置
			$('div').mousemove(function(e){
				alert('div 区域x值'+e.pageX+"div区域y值"+e.pageY);
			});
			$('input[type="text"]').focus(function(e){
				alert('获取焦点'+e.pageX)
			});
		</script>
	</body>
</html>